/* src/assets/main.css */
/* --- 引入主题颜色变量 --- */
@import './theme_color.css';

/* 基础重置 (可选，但推荐) */
*,
*::before,
*::after {
    box-sizing: border-box; /* 更直观的盒子模型 */
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    /* 字体平滑渲染 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 响应式的根字体大小 --- */
/* 默认 (移动端/小屏幕): 使用视口宽度单位 vw */
html {
    /*
     * 假设设计基准宽度为 375px，期望基础字号为 16px。
     * 计算：(期望字号 / 基准宽度) * 100 = (16 / 375) * 100 ≈ 4.27vw
     * 你可以根据实际设计稿调整这个值。4vw 在 360px 宽屏幕上大约是 14.4px，也是常用的起点。
     */
    font-size: 3vw;
}

/* 中等屏幕及以上 (例如 ≥ 768px，平板和桌面端) */
@media (min-width: 768px) {
    html {
        /* 为大屏幕设置一个固定的基础字号，作为 rem 计算的基准 */
        font-size: 24px; /* 1rem = 24px on larger screens */
    }
}

body {
    line-height: 1.6; /* 设置合适的行高 */
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* 优先使用现代系统字体 */
    /* 颜色将通过 CSS 变量控制 */
    background-color: var(--color-background); /* 应用背景色变量 */
    color: var(--color-text); /* 应用文本颜色变量 */
}

/* 改善标题文本渲染 */
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility; /* 优先考虑易读性 */
}

/* --- 其他基础样式 --- */
a {
    text-decoration: none; /* 去除链接下划线 */
    color: var(--color-link); /* 应用链接颜色变量 */
    transition: color 0.3s ease; /* 平滑颜色过渡 */
}
a:hover {
    color: var(--color-link-hover); /* 应用链接悬停颜色变量 */
}

button {
    font-family: inherit; /* 继承 body 字体 */
    cursor: pointer; /* 鼠标悬停显示手型 */
}

input, textarea, select { /* 统一表单元素字体 */
    font-family: inherit;
}